<nz-result *ngIf="web.isWeb" nzStatus="warning" [nzTitle]="titleTips">
  <div nz-result-extra>
    <button eo-ng-button *ngIf="isInstalledClient" nzType="primary" (click)="jumpToClient()" trace traceID="open_client">{{
      btnTitle
    }}</button>
    <pc-download-client btnType="button" *ngIf="!isInstalledClient"></pc-download-client>
  </div>
</nz-result>
<div class="mock" *ngIf="!web.isWeb">
  <form nz-form nzLayout="inline" class="flex px-[20px] pt-[15px]" (ngSubmit)="saveInfo('name')">
    <nz-form-item class="flex">
      <nz-form-control i18n-nzErrorTip nzErrorTip="Please input mock name" *ngIf="isEdit" class="flex">
        <input
          nz-input
          [(ngModel)]="model.name"
          name="required"
          required
          eo-ng-input
          autofocus
          (ngModelChange)="valueChange($event)"
          (blur)="saveInfo('name')"
        />
      </nz-form-control>
      <div class="flex items-center">
        <ng-container *ngIf="!isEdit">
          <h4 nz-typography class="!mb-[0px]">{{ model.name }}</h4>
          <div
            nz-tooltip
            [nzTooltipTitle]="hoverStr"
            [nzTooltipTrigger]="isHover"
            nzTooltipOverlayClassName="mockPopover"
            (click)="editClick()"
          >
            <button eo-ng-button nzType="text" class="ml-[5px]" [disabled]="creatWayIsSystem">
              <eo-iconpark-icon name="edit"></eo-iconpark-icon>
            </button>
          </div>

          <div
            nz-tooltip
            [nzTooltipTitle]="hoverStr"
            [nzTooltipTrigger]="isHover"
            nzTooltipOverlayClassName="mockPopover"
            (click)="handleDeleteMockItem()"
          >
            <button eo-ng-button nzType="text" class="ml-[5px]" [disabled]="creatWayIsSystem">
              <eo-iconpark-icon name="delete"></eo-iconpark-icon>
            </button>
          </div>
        </ng-container>
      </div>
    </nz-form-item>
  </form>

  <nz-divider></nz-divider>

  <div class="px-[20px]">
    <eo-ng-feedback-alert class="block my-[20px]" nzType="info" [nzMessage]="tipMessage" nzShowIcon></eo-ng-feedback-alert>
    <ng-template #tipMessage>
      <div i18n> Mock help you quickly simulate API, generate custom response data without actually setting up a back end. </div>
    </ng-template>

    <nz-form-label nzFor="response" class="w-100">URL </nz-form-label>

    <div>
      <p
        class="flex-1"
        [nzContent]="model.url"
        nz-typography
        nzCopyable
        nzEllipsis
        [nzCopyText]="model.url"
        [nzCopyIcons]="[copedIcon, copedIcon]"
      >
      </p>
      <ng-template #copedIcon>
        <button eo-ng-button nzType="text"><eo-iconpark-icon name="copy"></eo-iconpark-icon></button>
      </ng-template>

      <form>
        <nz-form-item class="block mt-20px">
          <nz-form-label i18n nzFor="response" class="w-100">Response </nz-form-label>
          <nz-form-control>
            <eo-monaco-editor
              [(code)]="model.response"
              id="response"
              [autoType]="true"
              class="h-[200px] border-all"
              [config]="{ readOnly: creatWayIsSystem }"
              [eventList]="['type', 'format', 'copy', 'search', 'replace']"
              (codeChange)="valueChange($event)"
            >
            </eo-monaco-editor>
          </nz-form-control>
        </nz-form-item>

        <ng-container>
          <div
            nz-tooltip
            [nzTooltipTitle]="hoverStr"
            [nzTooltipTrigger]="isHover"
            nzToolTipOverlayClassName="mockPopover"
            nzTooltipPlacement="topLeft"
          >
            <button
              type="submit"
              eo-ng-button
              nzType="primary"
              i18n
              [disabled]="model?.createWay === 'system'"
              (click)="saveInfo('response')"
              [nzLoading]="isSaving"
            >
              Save
            </button>
          </div>
        </ng-container>
      </form>
    </div>
  </div>
</div>
